<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link href="/web-frame/element/css/index.css" rel="stylesheet"/>
    <script src="/web-frame/element/js/vue.js"></script>
    <script src="/web-frame/element/js/index.js"></script>
    <script src="/web-frame/element/js/axios.js"></script>
    <script src="/web-frame/lib/app.js"></script>
</head>
<body>
<div id="app">
    <h2>基础用法</h2>
    <div class="block">
        <span class="demonstration">页数较少时的效果</span>
        <el-pagination
                layout="prev, pager, next"
                :total="50">
        </el-pagination>
    </div>
    <div class="block">
        <span class="demonstration">大于 7 页时的效果</span>
        <el-pagination
                layout="prev, pager, next"
                :total="1000">
        </el-pagination>
    </div>

    <hr>
    <h2>设置最大页码按钮数</h2>
    <el-pagination
            :page-size="20"
            :pager-count="11"
            layout="prev, pager, next"
            :total="1000">
    </el-pagination>

    <hr>
    <h2>带有背景色的分页</h2>
    <el-pagination
            background
            layout="prev, pager, next"
            :total="1000">
    </el-pagination>
</div>
<script>
    var Main = {
        data() {
            return {

            }
        },
        created(){

        },
        methods: {

        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')
</script>
</body>
</html>